<template>
  <div class="content">
    <h1>App.vue（爷爷级别）</h1>
    <label>
      <input v-model="colorVal" value="red" name="color" type="radio">
      红色
    </label>

    <label>
      <input v-model="colorVal" value="pink" name="color" type="radio">
      粉色
    </label>

    <label>
      <input v-model="colorVal" value="yellow" name="color" type="radio">
      黄色
    </label>

    <div class="box"></div>

    <hr/>

    <provideAVue></provideAVue>
  </div>
</template>

<script setup lang="ts">
import { ref, provide, readonly } from "vue"
import provideAVue from "./components/provideA.vue"


const colorVal = ref<string>('red')

// provide('color', colorVal)
provide('color', readonly(colorVal))  // readonly 只读属性， 父组件提供数据，子组件无法修改

</script>

<style lang="less" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  background-color: v-bind(colorVal);
}
</style>